<template>
  <div class="login-container">
    <van-nav-bar @click-left="onClickLeft">
      <template #left>
        <i class="iconfont iconbtn_nav_back"></i>
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="tip">您好，请登录</div>
      <van-form class="form" @submit="onSubmit" ref="loginFormRef">
        <van-field
          v-model="loginForm.mobile"
          placeholder="请输入手机号"
          name="mobile"
          :rules="[{ pattern: mobilePattern, message: '手机号不合法' }]"
        >
          <template #left-icon>
            <i class="iconfont iconbianzu1"></i>
          </template>
        </van-field>
        <van-field
          v-model="loginForm.code"
          placeholder="请输入验证码"
          name="code"
          :rules="[{ required: true, message: '验证码不能为空' }]"
        >
          <template #left-icon>
            <i class="iconfont iconyanzhengma"></i>
          </template>
          <template #extra>
            <span class="code" @click="onGetCode">{{ tipName }}</span>
          </template>
        </van-field>
        <p class="tip2">
          登录即同意<a>《用户使用协议》</a>和<a>《隐私协议》</a>
        </p>
        <div style="margin-top: 44px;">
          <van-button round block type="danger" native-type="submit">
            确定
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { getCode, login } from '../../api/user'

// 实例
const instance: any = getCurrentInstance()

// 模型数据
const loginForm = reactive({
  mobile: '13999999999',
  code: ''
})

// 倒计时相关
const tipName = ref('获取验证码')
const count = ref(60)
const isCountDown = ref(false)
const timerId = ref(-1)

// 手机号正则校验
const mobilePattern = /^1[3-9][0-9]{9}$/

// 路由相关
const router = useRouter()
const route: any = useRoute()

// vuex
const store = useStore()

const onClickLeft = () => {
  router.back()
}

// form的ref
const loginFormRef: any = ref(null)

// 获取验证码
const onGetCode = async () => {
  try {
    await loginFormRef.value.validate('mobile')

    if (isCountDown.value) return

    // 倒计时
    isCountDown.value = true
    tipName.value = `${count.value}秒后重试`

    timerId.value = setInterval(() => {
      if (count.value <= 1) {
        clearInterval(timerId.value)
        tipName.value = '获取验证码'
        count.value = 60
        isCountDown.value = false

        return
      }

      count.value--
      tipName.value = `${count.value}秒后重试`
    }, 1000)

    // 发请求，获取验证码
    const res: any = await getCode(loginForm.mobile)
    if (res.code === 200) {
      // 赋值
      loginForm.code = res.data

      // 提示
      instance.ctx.$toast(res.data)
    } else {
      instance.ctx.$toast('获取验证码失败~')
    }
  } catch (error) {
    console.log('getCode ', error)
  }
}

// 登录
const onSubmit = async () => {
  const res: any = await login(loginForm)

  if (res.code === 200) {
    // 提示
    instance.ctx.$toast('登录成功~')

    // 把信息保存到vuex
    store.commit('user/setToken', res.data.jwt)
    store.commit('user/setUserInfo', res.data.user)

    // 路由跳转
    if (route.query.redirect) {
      router.push(route.query.redirect)
    } else {
      router.push('/find')
    }
  } else {
    instance.ctx.$toast('登录失败~')
  }
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
  background-color: #fff;
  ::v-deep .van-nav-bar__left {
    padding: 0px;
  }
  .iconbtn_nav_back {
    font-size: 44px;
  }
  .content {
    padding: 15px;
    .tip {
      margin-top: 30px;
      width: 110px;
      height: 25px;
      opacity: 1;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
    }
    .iconfont {
      font-size: 14px;
      margin-right: 15px;
    }
    .form {
      margin-top: 65px;
      .code {
        color: #00b8d4;
      }
      .tip2 {
        margin-top: 15px;
        width: 243px;
        height: 16px;
        opacity: 1;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #181a39;
        line-height: 16px;
        letter-spacing: 0px;
        a {
          color: #00b8d4;
        }
      }
    }
  }
}
</style>
